/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  FlatList,
  SectionList,
  View,
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';

const App = StackNavigator({
  Main: {screen: MainScreen},
  Profile: {screen: ProfileScreen},
});
class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigator: PropTypes.object.isRequired,
  }

  constructor(props, context) {
    super(props, context);
    this._onForward = this._onForward.bind(this);
  }

  _onForward() {
    this.props.navigator.push({
      title: 'Scene ' + nextIndex,
    });
  }

  render() {
    return (
      <View>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
      </View>
    )
  }
}
export default class MyApp extends Component {
  constructor(props) {
   super(props);
   this.state = {text: ''};
 }
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    
      // <View style={styles.container}>
      //   <SectionList
      //     sections={[
      //       {title: 'D', data: ['Devin']},
      //       {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
      //     ]}
      //     renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
      //     renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
      //   />
      // </View>
     //  <View style={styles.container}>
     //   <FlatList
     //     data={[
     //       {key: 'Devin'},
     //       {key: 'Jackson'},
     //       {key: 'James'},
     //       {key: 'Joel'},
     //       {key: 'John'},
     //       {key: 'Jillian'},
     //       {key: 'Jimmy'},
     //       {key: 'Julie'},
     //     ]}
     //     renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
     //   />
     // </View>
      // <View style={{padding : 10}}>
      // <TextInput
      // style = {{height:40}}
      //
      // placeholder="Type here to translate!"
      // onChangeText = {(text) =>this.setState({text})}
      // />
      // <Text style={{padding:10,fontSize:42,color:'red'}}>
      // {this.state.text.split('').map((word) =>word &&'🍕').join(' ')}
      // </Text>
      // </View>
      // <View style={{
      //   flex: 1,
      //   flexDirection: 'column',
      //   justifyContent: 'center',
      //   alignItems: 'flex-end',
      //
      // }}>
      //   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      //   <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
      //   <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      // </View>
      // <View style ={{flex :1}}>
      //   <View style ={{flex :1,backgroundColor: 'powderblue'}} />
      //   <View style ={{flex :2,backgroundColor: 'skyblue'}} />
      //   <View style ={{flex :3,backgroundColor: 'steelbule'}} />
      //   <Text style={styles.highScoresTitle}>
      //     2048 High Scores!
      //   </Text>
      //   <Text style={styles.scores,styles.red}>
      //     {contents}
      //   </Text>
      // </View>
      // <View style={styles.container}>
      //   <Text style={styles.highScoresTitle}>
      //     2048 High Scores!
      //   </Text>
      //   <Text style={styles.scores,styles.red}>
      //     {contents}
      //   </Text>
      // </View>

    );
  }

}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  sectionHeader: {
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 5,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})


AppRegistry.registerComponent('MyApp', () => MyApp);
